<template>
  <el-col :span="24" style="overflow-x:hidden">
    <el-carousel :interval="4000" type="card" height="200px">
      <el-carousel-item v-for="item in 6" :key="item">
        <h3 class="medium">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>

    <!--    items.essayId-->
    <el-col :span="24" v-for="(items,index) in messageList.page.records" @click.native="cutEssay(items.essayId)"
            :key="items.essayId" class="item-box" style="z-index: 10">

      <el-col :span="24" style="height: 185px" class="bg-light br message-item mt-3">
        <el-col :span="16" class="message-item-title">
          <span class="item-title">{{ items.essayTitle }}</span>
        </el-col>

        <el-col :span="24" class="message-item-pic">
          <el-row :gutter="15" class="h-100">
            <el-col :span="4" class="h-100" style="text-align: left">
              <img :src="items.essayPic" class="ms-3" height="90%">
            </el-col>
            <el-col :span="20" class="message-item-data"
                    style="overflow: hidden;text-overflow: ellipsis;-o-text-overflow: ellipsis;height: 67px">
              <span style="text-overflow: ellipsis;overflow: hidden;" class="h-100">
<!--                  程序员受苦久矣多年前的一个夜晚，风雨大作，一个名叫Docker的年轻人来到Linux帝国拜见帝国的长老。推荐学习：爱了！Alibaba内部出品“K8S+Docker指南”，理论与实战双管齐下“Linux长老，天下程序员苦于应用部署久矣，我要改变这一现状，希望长老你能帮帮我”长老回答：“哦，小小年纪，口气不小，先请入座，你有何所求，愿闻其详”Docker坐下后开始侃侃而谈：“当今天下，应用开发、测试、部署，各种库的依赖纷繁复杂，再加上版本之间的差异，经常出现在开发环境运行正常，-->
                {{ items.essayMessage }}
              </span>
            </el-col>
            <el-col :span="19" style="height: 20px;text-align: left" class="mt-3">
              <span>{{ items.username }}</span>
              <span class="ps-3">{{ items.createTime }}</span>
            </el-col>
          </el-row>
        </el-col>
      </el-col>

    </el-col>

    <el-col :span="24" class="mt-4">
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="10"
        :total="messageList.page.total"
      >
      </el-pagination>

    </el-col>

  </el-col>

</template>

<script>
import $http from '@/axios/api'

export default {
  name: 'index',
  data () {
    return {
      messageList: {
        page: {
          total: 1
        }
      },
      currentPage: 1
    }
  },
  mounted () {
    // let msg =  this.$route.params.msg
    // console.log(msg)
    // if (msg != 'undefined'){
    //   this.$http.searchEssayList({ msg: this.essayInput }).then(res => {
    //     this.messageList = res.data
    //   })
    // }
    $http.getMessageList({
      limit: 1,
      size: 10
    }).then(res => {
      console.log(res.data)
      this.messageList = res.data
    })

  },
  methods: {
    handleCurrentChange (val) {
      $http.getMessageList({
        limit: val,
        size: 10
      }).then(res => {
        console.log(res.data)
        this.messageList = res.data
      })
    },
    cutEssay (id) {
      console.log(id)
      let routeData = this.$router.resolve({
        name: 'essay',
        query: { essayId: id }
      })

      window.open(routeData.href, '_blank')
    }
  }
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.br {
  border-radius: 15px;
}

.message-item-title {
  margin-top: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 33%;
  text-align: left;
}

.item-title {
  font-size: 25px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  padding-left: 20px;
  padding-top: 15px;
  color: #222226;
  font-family: 黑体;
}

.message-item-pic {
  height: 60%;
}

.message-item-data {
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  /*white-space: nowrap;*/
  -o-text-overflow: ellipsis;
}

.message-item:hover {
  box-shadow: 0px 0px 5px #999999;
}
</style>
